<template>
  <div id="dialogSource">
    <el-dialog
      title="导出功能入口使用占比"
      :visible.sync="dialogData.isShow"
      width="900px"
      @close="closeAddDialog"
    >
      <!-- 顶部搜索框部分 -->
      <div class="search-box">
        <el-form
          ref="ruleForm"
          :inline="true"
          :model="formInline"
          :rules="rules"
        >
          <!-- 输入搜索部分 -->
          <el-form-item label="用户类型" prop="identity">
            <el-select
              v-model="formInline.identity"
              placeholder="请选择用户类型"
              clearable
            >
              <el-option
                v-for="item in identityList"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="功能入口" prop="channel">
            <el-select
              v-model="formInline.channel"
              placeholder="请选择来源"
              clearable
            >
              <el-option
                v-for="item in channelList"
                :key="item.dictLabel"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="s-btn">
            <el-button
              type="success"
              icon="el-icon-search"
              @click="toSearch('ruleForm')"
            >
              查询
            </el-button>
            <el-button type="success" plain @click="reset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <freshCom @searchList="searchList"></freshCom>
      <!-- 表格部分 -->
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        max-height="490"
      >
        <el-table-column type="index" width="80" align="center" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index
                | filterPage(searchParams.pageNum, searchParams.pageSize)
            }}
          </template>
        </el-table-column>
        <el-table-column prop="eventDate" label="日期"></el-table-column>
        <el-table-column prop="channelCnt" label="用户数"></el-table-column>
        <el-table-column prop="source" label="来源"></el-table-column>
        <el-table-column prop="identity" label="用户类型"></el-table-column>
        <el-table-column prop="channel" label="功能入口"></el-table-column>
      </el-table>
      <!--分页-全局组件-->
      <pageCom
        :searchParams="searchParams"
        :total="total"
        @searchList="searchList"
      ></pageCom>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="closeAddDialog"
          >取 消</el-button
        >
        <el-button
          type="success"
          :loading="confirmloading"
          @click="exportConfirm"
          >确定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  getEnterTable,
  exportEnter
} from '@/api/dataStatistics/baseData/index.js' // 接口
export default {
  name: 'dialogSource',
  msg: '用户来源导出弹窗',
  props: ['dialogData'],
  data() {
    return {
      loading: false,
      confirmloading: false,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        channel: '',
        identity: ''
      },
      rules: {
        channel: {},
        identity: {}
      },
      channelList: [{ dictLabel: '全部', dictValue: '' }], // 来源
      identityList: [{ dictLabel: '全部用户', dictValue: '' }] // 用户类型
    }
  },
  mounted() {
    this.getStatusList()
    this.searchList()
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign(
        {},
        this.searchParams,
        this.formInline,
        this.dialogData.params
      )
      getEnterTable(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 搜索
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 获取字典状态 */
    async getStatusList() {
      //功能入口
      let data = await sysNormalDisable('dataview_function')
      this.channelList = this.channelList.concat(data)
      //用户类型
      let data2 = await sysNormalDisable('dataview_user_type')
      this.identityList = this.identityList.concat(data2)
    },
    // 重置
    reset() {
      this.$refs['ruleForm'].resetFields()
    },
    // 确认导出
    exportConfirm() {
      /* this.confirmloading = true*/
      let obj = Object.assign({}, this.formInline, this.dialogData.params)
      let url = exportEnter()
      this.downFile('get', url, obj, '功能入口使用占比')
      this.dialogData.isShow = false
    },
    // 弹窗关闭事件
    closeAddDialog() {
      this.loading = false
      this.dialogData.params = null
      this.dialogData.isShow = false
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#dialogSource {
  .search-box {
    padding-left: 0 !important;
  }
}
</style>
